<template>
	<view>
		<view class="call-box u-m-t-2">
			<u-icon name="scan" @click="scan" size="48" class="u-m-r-30"></u-icon>
			<u-search class="u-flex-1" placeholder="请输入客户手机号或名称" shape="square" :show-action="false" v-model="keyword" @focus="information = true" @blur="searchBlur" @change="searchKey"></u-search>
			<!-- <u-input v-model="value" placeholder="请输入客户手机号检测" class="u-m-r-30 u-flex-1" size="mini" clearable :focus="focus" /> -->
		</view>
		<view class="search-list" v-if="information == true">
			<view class="u-flex u-justify-content u-p-20" v-if="loading">
				<u-loading mode="flower"></u-loading><text class="u-tips-color u-m-l-10">搜索中...</text>
			</view>
			<view v-if="searchList.length > 0">
				<view class="u-m-l-30 u-m-t-10 u-m-b-10"><text class="u-tips-color u-font-24">共{{searchList.length}}条搜索结果</text></view>
				<u-cell-group>
					<u-cell-item 
						v-for="(item,index) in searchList"
						:key="index"
						:title="item.name" :value="item.mobile"
						 @click="chooseCustomer(item)">
					</u-cell-item>
				</u-cell-group>
			</view>
			<view class="u-p-60" v-if="!loading && searchList.length == 0">
				<view v-if="isNotReg">
					<u-empty text="没有检索出此用户" mode="search"></u-empty>
					<view class="u-text-center u-p-b-30">
						<text class="u-tips-color">是否以 {{keyword}} 号码创建新用户下单？</text>
					</view>
					<u-button type="primary" @click="registerAccount(keyword)">立即创建</u-button>
				</view>
				<u-empty v-else text="没有搜索结果" mode="search"></u-empty>
			</view>
		</view>
		<template v-else>
		<!-- 用户信息 -->
		<view class="grid-box" v-if="info.name">
			<view class="head-title u-m-b-20"><text>用户信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">用户名称：</text>
					<view class="text" @click="userTypeShow = true">
						<!-- <u-avatar :src="fileURL+info.face" :size="30"></u-avatar> -->
						<text>{{info.name}}</text>
						<!-- <text v-if="userType.enterpriselist.length > 1">({{userType.enterpriselist.length}}个身份)</text> -->
						<text v-if="userType.enterpriselist.length > 1" class="iconfont icon-qiehuangongsi u-tips-color u-m-l-5"></text>
					</view>
				</view>
				<view class="item">
					<text class="label">用户电话：</text>
					<view class="text">
						<text>{{info.mobile}}</text>
					</view>
				</view>
				<view class="item" v-if="enterprise.id > 0">
					<text class="label">所属客户组：</text>
					<view class="text">[{{enterprise.type}}]{{enterprise.name}}</view>
				</view>
			</view>
		</view>
		
		<!-- 回收物清单 -->
		<view class="grid-box">
			<view class="head-title u-m-b-20"><text>回收物清单</text></view>
			
			<view class="">
				<u-button size="medium" plain @click="addGoods">+添加可回收物</u-button>
				
				<goods-list :orderId="id" :listData="confirmForm.details" @upDate="upDate"></goods-list>
				
				<view class="total">
					<text>共{{confirmForm.details.length}}种回收物 合计价值:</text>
					<text class="total-price">
						￥{{confirmForm.total==0?'--':confirmForm.total.toFixed(2)}}
					</text>
				</view>
			</view>
		</view>
		<!-- 入库拍照 -->
		<view class="grid-box">
			<view class="head-title u-m-b-20"><text>入库拍照</text></view>
			<view class="item">
				<common-upload max-count="9" @on-success="uploadSuccess" @on-remove="removePhoto"></common-upload>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group">
					<view class="u-flex">
						<view class="u-p-r-30 u-text-right">
							<text class="u-color-main" style="text-decoration: underline;" @click="cancel">取消</text>
						</view>
						<view class="u-flex-1">
							<u-button type="primary" @click="confirm">确定</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
		</template>
		<!-- 确认订单信息 -->
		<u-popup v-model="confirmOrder" mode="bottom" border-radius="14" :closeable="true" z-index="99">
			<view class="confirm-order u-p-t-40">
				<view class="u-text-center u-p-t-30">
					<view class="u-m-r-10"><u-icon name="question-circle-fill" size="120" class="u-type-warning"></u-icon></view>
					<view class="u-font-36">确认入库</view>
				</view>
				<view class="u-p-b-80 u-p-t-15 u-text-center u-font-28 u-tips-color"><text>请确认以下订单信息</text></view>
				<u-cell-group>
					<u-cell-item :arrow="false" v-for="(item,index) in confirmForm.details" :key="index">
						<view slot="title">
							<view class="u-font-30 u-main-color">
								<text class="goods-name">{{item.name}}</text>
							</view>
							<view class="u-font-24 u-tips-color">
								<text>单价为<text>{{item.price}}</text>元/{{ item.isweighing? 'KG':'件'}}，共{{item.isweighing?'重':'计'}}<text>{{item.weight}}</text>{{ item.isweighing? 'KG':'件'}}</text>
							</view>
						</view>
						<text class="u-font-28">
							<text class="goods-price"><text class="u-font-24">￥</text><text class="u-font-36">{{utils.formatMoney(item.price*item.weight)}}</text></text>
						</text>
					</u-cell-item>
					<u-cell-item title="拍照上传" :arrow="false" v-if="pic.length > 0">
						<view class="u-flex" style="justify-content: flex-end">
							<view class="u-p-l-10" v-for="(item,index) in pic" :key="index">
								<u-image :src="imgURL(item)" width="100" height="100" @click="seePhoto(index)">
									<u-loading slot="loading"></u-loading>
								</u-image>
							</view>
						</view>
					</u-cell-item>
				</u-cell-group>
				<view class="tips"><text>请确认无误后点击确认提交</text></view>
				<view class="navigation-sticky-box">
					<view class="navigation u-p-b-0 u-m-b-0">
						<view class="left">
							<view class="u-text-left u-flex-1 u-p-l-40">
								<view><text class="u-font-24 u-tips-color">确认后，请支付客户：</text></view>
								<text class="text-orange goods-price">￥</text>
								<text class="u-font-36 goods-price">{{confirmForm.total==0?'--':confirmForm.total.toFixed(2)}}</text>
							</view>
						</view>
						<view class="right" @click="startConfimCreate">
							<view class="buy btn u-line-1 bg-gradual-blue">确认提交</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 确认支付方式 -->
		<u-popup v-model="payTypeShow" mode="center" border-radius="14" :closeable="true" width="600rpx" z-index="100">
			<view class="u-p-t-30 u-p-b-30 u-text-center"><text class="u-font-32">支付方式</text></view>
			<u-divider></u-divider>
			<u-cell-group>
				<u-cell-item title="微信小程序" :arrow="false" @click="payType = 1">
					<view slot="icon" class="u-flex" style="width: 80rpx;">
						<u-icon name="weixin-fill" size="60" color="#28a745"></u-icon>
					</view>
					<view slot="label">
						<view v-if="onlinePay"><text>支付至用户账户余额</text></view>
						<view v-else><text class="u-type-error">余额不足，请选择现金支付</text></view>
					</view>
					<view slot="right-icon">
						<view class="circle" :class="payType == 1?'on':''">
							<u-icon name="checkmark" size="20" color="#fff" v-if="payType == 1"></u-icon>
						</view>
					</view>
				</u-cell-item>
				<u-cell-item title="现金结算" :arrow="false" @click="payType = 2">
					<view slot="icon" class="u-flex" style="width: 80rpx;">
						<u-icon name="rmb-circle-fill" size="60" color="#fd7e14"></u-icon>
					</view>
					<view slot="label">
						<view><text>与用户线下现金结算</text></view>
					</view>
					<view slot="right-icon">
						<view class="circle" :class="payType == 2?'on':''">
							<u-icon name="checkmark" size="20" color="#fff" v-if="payType == 2"></u-icon>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="u-p-30">
				<u-button type="primary" @click="confirmCreate" :loading="loading">确认支付</u-button>
			</view>
		</u-popup>
		<!-- 选择客户身份（多个时） -->
		<u-popup v-model="userTypeShow" mode="center" border-radius="14" :closeable="true" width="600rpx" z-index="100">
			<view class="u-p-t-30 u-p-b-30 u-text-center"><text class="u-font-32">选择身份下单</text></view>
			<u-cell-group>
				<u-cell-item 
					v-for="(item,index) in userType.enterpriselist"
					:key="index"
					:title="item.name" 
					:label="item.type"
					:arrow="false"
					@click="enterprise = item"
					>
					<view slot="right-icon">
						<view class="circle" :class="enterprise.id == item.id?'on':''">
							<u-icon name="checkmark" size="20" color="#fff"></u-icon>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="u-p-30">
				<u-button type="primary" @click="userTypeShow = false">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				id: 0,
				loading: false,
				keyword: '',
				//显示信息
				information:false,
				focus: false,
				// 搜索结果
				searchList: [],
				piclist: [],
				pic: [],
				isNotReg: false,
				// 分拣清算
				chooseShow: false,
				confirmForm:{
					orderid:0,
					details: [
						// {
						// 	id: 0,
						// 	name: '杂纸',
						// 	weight: 10,
						// 	price: 9.9
						// }
					],
					
					total: 0
				},
				// 选择的客户信息
				info:{
					name: ''
				},
				// 客户的客户组信息
				enterprise:{
					id: 0,
					name: '', //客户组名称
					type: '', //客户组分类
					department: '', //客户组部门
				},
				// 选择用户身份（多个时）
				userTypeShow: false,
				userType:{
					enterpriselist: []
				},
				// 提示价格范围
				tips:[
					// {
					// 	title: '',
					// 	description: ''
					// }
				],
				message: '',
				// 支付方式
				showpay: false,
				accountList: [],
				pay:{
					accountId: 0,
					name: '',
					picvoucher: ''
				},
				// 验证信息
				err:[
					
				],
				confirmOrder: false,
				// isschool: false, //判断是否为学校
				payTypeShow: false,
				payType: 2, //1:微信小程序,2:线下支付
				fileUploadURL: getApp().globalData.fileUploadURL,
				//站点详情
				storeDetails:{},
				onlinePay: false
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.message = opt.message
			// this.isschool = opt.isschool

			if(this.message){
				this.getQRCodeData(opt.message)
			}else{
				this.info.offline = true
			}
			// this.getAccountList()
			this.getQuota()
			this.getFITCreateInfo()
		},
		
		computed: {
			...mapState({
				header: state => state.Authorization,
				storeId: state => state.storeId,
				franchiseId: state => state.franchiseId
			}),
			...mapState('shop', {
				goodsDetails: state => state.goodsDetails,
			})
		},
		watch: {
			goodsDetails(value){
				let confirmForm = {
					orderid: this.orderId,
					details: value
				}
				this.confirmChoose(confirmForm)
			}
		},
		methods: {
			addGoods(){
				this.$store.commit('shop/setGoodsDetails', this.confirmForm.details)
				let param = ``
				if(this.enterprise.id > 0){
					param = `?enterpriseid=${this.enterprise.id}`
				}
				console.log(`/pages/shop/goodsChoose/goodsChoose`+param)
				uni.navigateTo({
					url: `/pages/shop/goodsChoose/goodsChoose`+param,
				});
			},
			scan() { //入库扫码
				// #ifdef H5
				this.getQRCodeData('e0451588f18149b1913b9b254677c9d6')
				// #endif
				
				uni.scanCode({
					autoZoom: false,
					scanType: ['qrCode'],
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						
						this.getQRCodeData(res.result)
					},
					// fail: (err) => {
					// 	uni.showModal({
					// 		content: '识别错误，请再试一次',
					// 		complete: (res) => {
			
					// 		}
					// 	})
					// }
				});
			},
			// 创建用户
			registerAccount(mobile){
				this.$u.post('/User/Account/Register',{
					isWxReg: false,
					name: mobile,
					mobile: mobile,
					defaultPassType: 0,
				}).then((res)=>{
					uni.showToast({
						title: '注册成功'
					})
					// this.information = false
					// this.info.name = mobile
					// this.info.mobile = mobile
					
					this.searchKey(mobile).then((res)=>{
						this.information = false
						this.chooseCustomer(res[0])
					})
				})
			},
			//选择客户
			chooseCustomer(item){
				this.enterprise.id = 0
				this.userType.enterpriselist = [{
					id: 0,
					name: item.name,
					type: '个人'
				}]
				if(item.enterprisenumber > 0){
					// 表示该用户下有加入的客户组
					let franchiseId = this.franchiseId
					this.$u.get('/User/Detail?userId='+item.id).then((res)=>{
						console.log('表示该用户下有加入的客户组再查看用户详情',res)
						this.info = res
						let enterpriselist = this.info?.bindinfo?.enterpriselist.filter((item)=>item.franchiseid == franchiseId) || []
						
						enterpriselist.forEach((item)=>{
							this.userType.enterpriselist.push(item)
						})
						// this.userTypeShow = true
						if(enterpriselist.length > 0){
							if(enterpriselist.length == 1){
								this.enterprise = {
									id:  enterpriselist[0].id, //应为客户组id
									name: enterpriselist[0].name,
									type: enterpriselist[0].type,
									department: enterpriselist[0].department,
								}
							}else{
								this.userTypeShow = true
							}
						}
					})
				}else{
					this.info = item
				}
			},
			// 二维码识别用户
			getQRCodeData(message){
				this.enterprise.id = 0
				let franchiseId = this.franchiseId
				this.$u.get('/AIO/Account/GetQRCodeInfo?code='+message).then((res)=>{
					this.info = res.account?.user
					let enterpriselist = this.info?.bindinfo?.enterpriselist.filter((item)=>item.franchiseid == franchiseId) || []
					
					if(enterpriselist.length > 0){
						this.userType.enterpriselist = [{
							id: 0,
							name: this.info.name,
							type: '个人'
						}]
						enterpriselist.forEach((item)=>{
							this.userType.enterpriselist.push(item)
						})
						if(enterpriselist.length == 1){
							this.enterprise = {
								id:  enterpriselist[0].id, //应为客户组id
								name: enterpriselist[0].name,
								type: enterpriselist[0].type,
								department: enterpriselist[0].department,
							}
						}else{
							this.userTypeShow = true
						}
					}
					console.log('this.info',this.info)
				})
			},
			// 关键词搜索客户
			searchKey(key){
				this.loading = true
				this.isNotReg = false
				return this.$u.post('/User/List',{
					key: key,
					isALL: true
				}).then((res)=>{
					this.searchList = res.rows
					if(this.searchList.length == 0){
						if(this.$u.test.mobile(key)){
							this.isNotReg = true
						}
					}
					this.loading = false
					
					return res.rows
				}).catch(()=>{
					this.loading = false
				})
			},
			
			searchBlur(){
				setTimeout(()=>{
					this.information = false
				},100)
			},
			// 上传qc入库拍照
			uploadSuccess(data, index, lists, name) {
				this.pic.push(data.datas.path);
			},
			removePhoto(index, lists, name) {
				this.pic.splice(index, 1)
				// console.log(this.fileList)
			},
			// 上传图片失败时处理
			uploadError(data, index, lists, name) {
				uni.showToast({
					icon: 'none',
					title: '提交失败，请重试'
				})
			},
			// 关闭分拣清算窗口
			confirmChoose(confirmForm){
				console.log('confirmForm',confirmForm)
				this.confirmForm.orderid = this.id
				// 获取上一次添加的回收品信息
				let historyArr = []
				if(this.confirmForm.details.length > 0){
					historyArr = JSON.parse(JSON.stringify(this.confirmForm.details))
				}
				
				// 提示信息
				this.tips = []
				let details = confirmForm.details
				this.confirmForm.details = details
				this.setTotal()
				this.chooseShow = false
			},
			upDate(confirmForm){
				this.confirmForm.orderid = this.id
				this.confirmForm.details = confirmForm.details
				
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item, index) => {
					if(item.weight){
						this.confirmForm.total += item.weight*item.price
					}
				})
				this.$store.commit('shop/setGoodsDetails', this.confirmForm.details)
				this.chooseShow = false
			},
			// 计算合计值
			setTotal(){
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item)=>{
					this.confirmForm.total += parseFloat(item.weight?item.weight:0)*item.price
				})
			},
			// // 获取支付方式列表
			// getAccountList(){
			// 	this.$u.post('/Operator/Account/List',{
			// 		"pageIndex": 1,
			// 		"pageSize": 999
			// 	}).then((res)=>{
			// 		this.accountList = res.rows
			// 	})
			// },
			// // 选择支付方式
			// confirmPayment(e){
			// 	this.pay.accountId = this.accountList[e].id
			// 	this.pay.name = this.accountList[e].accountnumber
			// },
			// 取消录入
			cancel(){
				uni.showModal({
					title: '是否退出录入？',
					content: '退出录入，将清空已录入内容？',
					success: (res)=> {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			},
			seePhoto(index) {
				let urls = []
				this.pic.forEach((item) => {
					urls.push(this.fileURL + item)
				})
				uni.previewImage({
					current: index,
					urls: urls
				});
			},
			imgURL(img) {
				return this.fileURL + img
			},
			// 确定弹窗
			confirm(){
				if(this.confirmForm.details.length == 0){
					this.err[0] = '请添加回收物信息'
				}else{
					this.err[0] = null
				}
				
				this.$forceUpdate()
				let check = true
				this.err.forEach((item)=>{
					if(item){
						check = false
					}
				})
				
				// 检查回收物清单的重量是否填写
				try {
				    this.confirmForm.details.forEach(item => {
						if(item.isweighing){
							if(item.weight == null || item.weight == 0){
								uni.showToast({
									title: '请填写'+item.name+'的重量',
									icon: 'none'
								})
							    throw Error()
							}
						}else{
							if(item.weight == null || item.weight == 0){
								uni.showToast({
									title: '请填写'+item.name+'的数量',
									icon: 'none'
								})
							    throw Error()
							}
						}
				        
				    })
				} catch(error) {
					check = false; 
				}
				
				// this.confirmForm.details.forEach((item)=>{
				// 	if(item.weight == null || item.weight == 0){
				// 		check = false
				// 		uni.showToast({
				// 			title: '请填写'+item.name+'的重量',
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}	
				// })
				
				if(!check){
					return
				}
				
				this.confirmOrder = true
			},
			// 发起提交
			startConfimCreate(){
				// 判断是否散户，否则选择结算方式
				if(this.info.id > 0){
					// this.payTypeShow = true
					
					this.getQuota().then((res)=>{
						// 判断是否有微信支付配额
						if(res.balance == null || res.balance > 0){
							// 可使用微信支付
							this.onlinePay = true
							this.payType = 1
						}else{
							// 不可以使用微信支付
							this.onlinePay = false
							this.payType = 2
						}
						
						this.payTypeShow = true
					})
				}else{
					this.confirmCreate()
				}
			},
			// 创建订单前获取信息
			getFITCreateInfo(){
				// this.$u.get(`/User/Order/GetFITCreateInfo?storeId=${this.storeId}`).then((res)=>{
				// 	console.log('创建订单前获取信息',res)
				// })
			},
			// 获支付配额余额
			getQuota(){
				// return this.$u.get(`/Store/Details?id=${this.storeId}`).then((res)=>{
				// 	/*
				// 		quota				配额（0为不限）
				// 		amount				已付金额（已用配额）
				// 		balance				剩余配额(空为不限，0为没有钱了，不能微信支付)
				// 	*/
				// 	console.log('查询配额',res.quota)
				// 	console.log('已付金额',res.amount)
				// 	console.log('剩余配额',res.balance)
				// 	this.storeDetails = res
				// 	return res
				// })
				
				return this.$u.get(`/User/Order/GetFITCreateInfo?storeId=${this.storeId}`).then((res)=>{
					console.log('创建订单前获取信息',res)
					console.log('运营商账户余额（0为没有钱了，不能微信支付）',res.operatorBalance)
					console.log('加盟商剩余配额(空为不限，0为没有钱了，不能微信支付)',res.franchiseBalance)
					return res
				})
			},
			// 确认提交
			confirmCreate(){
				// uni.showModal({
				// 	content: '请确认输入无误后入库',
				// 	confirmText: '确认',
				// 	success: (res)=> {
				// 		if (res.confirm&&!this.loading) {
							uni.showLoading({
								title: '提交中，请稍后...',
								mask: true
							})
							let param = {
								// "userId": this.info.id,
								// "details": this.confirmForm.details,
								"details": [],
								"pics": this.pic,
								"payWay": this.payType,
								"storeId": this.storeId
							}
							this.confirmForm.details.forEach((item)=>{
								param.details.push({
									id: item.id,
									typeRemarks: item.typeremarks,
									price: item.price,
									weight: item.weight
								})
							})
							
							// 有客户组时默认为客户组下单
							if(this.info.id > 0 && this.enterprise.id == 0){
								param.userId = this.info.id
							}
							if(this.enterprise.id > 0){
								param.enterpriseId = this.enterprise.id
							}
							
							this.loading = true
							this.$u.post('/User/Order/FITCreate',param).then((res)=>{
								uni.hideLoading()
								this.loading = false
								uni.redirectTo({
									url: '/pages/shop/income/user/success/success?id='+res.id
								})
								// uni.showModal({
								// 	content: '提交成功',
								// 	showCancel: false,
								// 	success: function (res) {
								// 		if (res.confirm) {
								// 			uni.redirectTo({
								// 				url: '../../../workbenches/workbenches'
								// 			})
								// 		}
								// 	}
								// })
							}).catch(res=>{
								this.loading = false
								uni.hideLoading()
							})
				// 		}
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.call-box {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 30rpx;
	}
	.u-color-red{
		color: $u-color-red;
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: bold;
		.total-price {
			font-size: 32rpx;
			color: $u-color-red;
		}
	}
	.bd {
		.td {
			height: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
	.bottom-box{
		height: 140rpx;
		.fixed-container{
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			// height: 128rpx;
			z-index: 9;
			box-shadow: 0 0 16rpx #e7e7e7;
		}
		.fixed-placeholder{
			height: 100%;
			width: 750rpx;
			margin-top: 30rpx;
		}
		.total{
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}
		.btn-group{
			padding: 30rpx;
		}
	}
	.input-text{
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 30px;
	}
	// 确认订单
	.confirm-order {
		max-height: 90vh;
	
		.price {
			font-weight: bold;
		}
	
		.bold {
			font-weight: bold;
		}
	
		.goods-name {
			font-weight: bold;
		}
	
		.goods-price {
			color: $u-color-orange;
			font-size: 32rpx;
			font-weight: bold;
		}
	
	
		.price-tag {
			display: flex;
			justify-content: flex-end;
	
			.item {
				display: block;
				padding: 0 10rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				margin-left: 30rpx;
				background-color: #3191fd;
			}
		}
	}
	// 提交订单栏
	.navigation-sticky-box {
		position: sticky;
		z-index: 99;
		bottom: 0;
		background: #fff;
		padding-bottom: 20rpx;
	
		.navigation {
			display: flex;
			width: 700rpx;
			// background-color: #ffffff;
			padding: 20rpx 0 30rpx;
			margin: 10rpx auto;
	
			.left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				flex: 1;
				background-color: #fff;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				box-shadow: $u-color-border-shadow;
	
				.item {
					margin: 0 30rpx;
					display: flex;
	
					.icon {
						position: relative;
					}
	
					&.car {
						text-align: center;
						position: relative;
	
						.car-num {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
						}
					}
				}
			}
	
			.right {
				display: flex;
				font-size: 28rpx;
				align-items: center;
	
				.btn {
					line-height: 100rpx;
					padding: 0 30rpx;
					border-radius: 50rpx;
					color: #ffffff;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					width: 240rpx;
					text-align: center;
				}
	
				.cart {
					background-color: #ed3f14;
					margin-right: 30rpx;
				}
	
				.buy {
					background-color: #ff7900;
				}
			}
		}
	}
	
	// 提示
	.tips {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 16rpx 30rpx;
		border-radius: 8rpx;
		position: relative;
		transition: all 0.3s linear;
		border: 1px solid #fff;
		background-color: #fdf6ec;
		border-color: #fcbd71;
		font-size: 26rpx;
		text-align: left;
		color: #606266;
		margin: 30rpx 30rpx 0 30rpx;
	}
	.circle{
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #666;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		&.on{
			border-color: $u-color-blue;
			background-color: $u-color-blue;
		}
	}
</style>
